<template>
    <el-card class="box-card" :body-style="{ height: '100%' }">
        <template #header>
            <div class="card-header">
                <div>
                    <div class="colorBar"></div>
                    <div>{{ title.text }}</div>
                </div>
                <div class="legendData">
                    <template v-for="(item, index) in legend.data" :key="index">
                        <div @click="toggleSeries(index)">
                            <div class="liColor">
                            </div>
                            <div>
                                {{ item }}
                            </div>
                        </div>
                    </template>
                </div>
                <div>
                    <el-button type="primary" @click="updateChartType('currentDay')">日</el-button>
                    <el-button type="primary" @click="updateChartType('currentWeek')">周</el-button>
                    <el-button type="primary" @click="updateChartType('currentMonth')">月</el-button>
                </div>
            </div>
        </template>
        <div ref="echartsContainer" id="main" style="width: 100%; height: 500px"></div>
    </el-card>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, onUpdated, reactive, ref, type VNodeRef, watch } from 'vue';
import { userDashoardMonthApi, userDashoardWeekApi, userDashoardDayApi } from '@/services/dashoard'
import { deepCopy } from '@/utils/Tools/deepCopy';

onMounted(async () => {
    let retWeek = await userDashoardWeekApi()
    changedata(retWeek.data)
    echartseries.series.forEach((series) => {
        console.log(series)
        legend.data.push(series.name);
        legend.selected[series.name] = true;
    });
});
const title = reactive({ text: '销售趋势(万元) ' });
type Series = {
    name: string;
    type: string;
    stack: string;
    data: number[];
};

type ChartData = {
    series: Series[];
};
type XAxis = {
    type: 'category';
    boundaryGap: boolean;
    data: string[];
};

type ChartOptions = {
    xAxis: XAxis;
};
type LegendData = {
    data: string[];
    selected: Record<string, boolean>;
};
const echartseries = reactive<ChartData>({
    "series": []
})
const echartxAxis = reactive<ChartOptions>({
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
})
const legend = reactive<LegendData>({
    data: [],
    selected: {},
});
const updateChart = (myChart: echarts.ECharts) => {
    myChart.setOption({
        title: {
            text: title.text,
            show: false
        },
        tooltip: {
            trigger: 'axis',
            show: false
        },
        legend: {
            data: legend.data,
            selected: legend.selected,
            show: false,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        xAxis: echartxAxis.xAxis,
        yAxis: {
            type: 'value',
        },
        series: echartseries.series
    });
}

const toggleSeries = (index: number) => {
    if (legend.data.length > index) {
        legend.selected[legend.data[index]] = !legend.selected[legend.data[index]];
        var myChart = echarts.init(document.getElementById('main'));
        updateChart(myChart);
    }
}
let deepEchartDate = reactive<any>({})
const updateChartType = async (value: string) => {
    console.log(12333)
    switch (value) {
        case "currentDay":
            let retday = await userDashoardDayApi()
            changedata(retday.data)
            break;
        case "currentWeek":
            let retWeek = await userDashoardWeekApi()
            changedata(retWeek.data)
            break;
        case "currentMonth":
            let retMonth = await userDashoardMonthApi()
            changedata(retMonth.data)
            break;
    }
}
const changedata = (value: any) => {
    deepEchartDate.value = deepCopy(value)
    echartseries.series = deepEchartDate.value.series
    echartxAxis.xAxis = deepEchartDate.value.xAxis
    var myChart = echarts.init(document.getElementById('main'));
    updateChart(myChart);
}
</script>
  
<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    width: 100%;

    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-self: center;

        div {
            display: flex;
            justify-content: space-between;
            align-self: center;
        }

        .card-header {
            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }

            li {
                float: left;
            }

            .legendData {
                cursor: pointer;
            }

            .liColor {
                width: 20px;
                height: 10px;
                // background-color: red;
                cursor: pointer;
                margin: 0 10px;
            }
        }
    }


}

.el-card__body {
    height: 100%;
}
</style>
  